<template>
	<view class="class-search">
		<view class="search-page">
			<view class="search-page-top">
				<view class="search-box">
					<input focus type="search" @confirm="searchConfirm()" confirm-type="search" v-model="searchContent" placeholder="请输入关键字"
					 placeholder-class="placeholder-input" />
					<image class="image-search" :src="isShow ? src : desrc" @click="deleteValue" />
				</view>
				<view class="cancel" @click="cancel">
					<text>取消</text>
				</view>
			</view>
			<view class="line"></view>
			<view class="search-page-bottom" v-if="isShow">
				<view class="remark-top">
					<view class="history">
						<text>历史记录</text>
					</view>
					<image class="delete" src="@/static/image/delete.png" @click="deletehistory" />
				</view>
				<view class="history-list">
					<view class="history-item" v-for="(item,index) in historyList" :key="index" @click="histortClick(item)">
						<text>{{item}}</text>
					</view>
				</view>
			</view>
			<view class="content" v-if="!isShow">
				<you-scroll ref="scroll" :fetch="getClassList">
					<view slot-scope="{row,index}" @click="goDetailPage(row,index)">
						<bidding-list-item :itemData="row"></bidding-list-item>
					</view>
				</you-scroll>
			</view>
		</view>
	</view>
</template>

<script>
	import BiddingListItem from './components/BiddingListItem.vue'
	import youScroll from '@/components/uni-list-scroll/you-scroll'
	import {
		getBiddingList
	} from '@/static/js/api/bidding.js';
	import request from '@/static/js/request.js';
	var self;
	export default {
		components: {
			youScroll,
			BiddingListItem
		},

		data() {
			return {
				searchContent: '',
				historyList: [],
				src: "@/static/image/searchimg.png",
				desrc: "@/static/image/close.png",
				isShow: true,

			}
		},
		watch: {

		},
		onShow() {
			this.historyList = uni.getStorageSync('biddingHistory') ? JSON.parse(uni.getStorageSync('biddingHistory')) : []
		},
		mounted() {
			self = this;
		},
		methods: {
			getClassList(pageIndex, pageSize) {
				return getBiddingList(pageIndex, pageSize, '[]', self.searchContent).then(res => {
					return res.data;
				})
			},
			goDetailPage(item, index) {
				uni.navigateTo({
					url: `/pages/home/bidding/BiddingDetailPage?id=${item.id}&type=${item.type}`
				})
			},
			searchConfirm() {
				let self = this;
				if (this.searchContent) {
					let index = this.historyList.findIndex(f => {
						return this.searchContent == f;
					})
					if (index >= 0) {
						this.historyList.splice(index, 1)
					}
					this.historyList.unshift(this.searchContent);
					uni.setStorageSync('biddingHistory', JSON.stringify(this.historyList))
					this.isShow = false;
					this.$nextTick(function() {
						self.$refs.scroll.loadData();
					})

				}
			},
			deleteValue() {
				this.isShow = true;
				this.searchContent = '';
			},
			cancel() {
				uni.navigateBack()
			},
			deletehistory() {
				let self = this;
				uni.showModal({
					title: '警告',
					content: '是否删除搜索记录',
					success() {
						uni.setStorageSync('biddingHistory', '[]');
						self.historyList = [];
					}
				})
			},
			histortClick(item) {
				let self = this;
				this.searchContent = item;
				this.isShow = false;
				this.$nextTick(function() {
					self.$refs.scroll.loadData();
				})
			}


		}
	}
</script>

<style lang="less" scoped>
	.class-search {
		overflow: hidden;
		height: 100vh;

		.search-page {
			.search-page-top {
				margin: 26rpx 30rpx;
				display: flex;
				// text-align: center;
				align-items: center;


				.search-box {
					width: 550rpx;
					height: 70rpx;
					background: #F7F8F9;
					border-radius: 6rpx;
					margin-right: 30rpx;
					display: flex;
					// text-align: center;
					align-items: center;
					padding: 0 20rpx;

					&>input {
						flex: 1;
					}

					.placeholder-input {
						font-size: 28rpx;
						font-weight: 500;
						color: #666666;
						line-height: 40rpx;
					}

					.image-search {
						width: 40rpx;
						height: 40rpx;
					}
				}



				.cancel {

					font-size: 34rpx;
					font-weight: 400;
					color: #333333;
					line-height: 48rpx;
				}
			}

			.line {
				width: 100%;
				border: 2rpx solid #EEEEEE;
			}

			.search-page-bottom {
				margin: 32rpx;

				.remark-top {
					display: flex;
					// text-align: center;
					align-items: center;
					margin-bottom: 40rpx;

					.history {
						font-size: 28rpx;
						font-weight: 400;
						color: #666666;
						line-height: 40rpx;
						flex: 1;
					}

					.delete {
						width: 36rpx;
						height: 36rpx;
					}
				}

				.history-list {
					display: flex;
					text-align: center;
					align-items: center;
					flex-direction: row;
					flex-wrap: wrap;

					.history-item {
						padding: 14rpx 30rpx;
						background: #EFF0F1;
						border-radius: 6rpx;
						font-size: 30rpx;
						font-weight: 400;
						color: #333333;
						line-height: 42rpx;
						margin-right: 40rpx;
						margin-bottom: 40rpx;
					}

					.history-item:last-child(n) {
						margin-right: 0rpx;
					}
				}
			}

			.content {
				// margin: 32rpx;
				height: calc(100vh - 150rpx);
			}

			.video-item {
				margin: 20rpx 30rpx 40rpx 30rpx;
				display: flex;
				align-items: center;

				.video-item-image {
					width: 226rpx;
					height: 168rpx;
					background-size: 100% 100%;
					background-repeat: no-repeat;
					position: relative;

					image {
						width: 48rpx;
						height: 48rpx;
						position: absolute;
						top: 50%;
						left: 50%;
						transform: translate(-50%, -50%);
					}
				}

				.video-content {
					flex: 1;
					margin-left: 23rpx;

					.video-word {
						word-break: break-all;
						text-overflow: ellipsis;
						overflow: hidden;
						display: -webkit-box;
						-webkit-line-clamp: 2;
						-webkit-box-orient: vertical;
						margin-bottom: 84rpx;
						font-size: 32rpx;
						font-weight: 400;
						color: #333333;
						line-height: 44rpx;
					}

					.video-remarks {
						display: flex;
						text-align: center;
						align-items: center;
						font-size: 28rpx;
						font-weight: 400;
						color: #666666;
						line-height: 40rpx;

						.video-time {
							flex: 1;
							text-align: left;
						}

						.video-eye {
							width: 30rpx;
							height: 22rpx;
							margin-right: 14rpx;
						}

						.video-value {

							color: #999999;
						}
					}
				}
			}
		}
	}
</style>
